<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style>
	.content div{
		width: 120px;
		height:120px;
		float:left;
	}
	.result{
		clear:left;
	}
</style>
</head>
<body>
	<!-- 奖品展示 -->
	<div class="content">
		<div class="j-1"></div>
		<div class="j-2"></div>
		<div class="j-3"></div>
		<div class="j-4"></div>
		<div class="j-5"></div>
		<div class="j-6"></div>
		<div class="j-7"></div>
		<div class="j-8"></div>
	</div>

	<!-- 抽奖结果区域 -->
	<div class="result">抽取结果</div>

	<!-- 操作区域 -->
	<div class="option">
		<a id="start">开始</a> <a id="stop" href="javascript:;">停止</a>
	</div>
	<script type="text/javascript" src="/static/js/jquery.min.js"></script>
	
	<script type="text/javascript">
	var cjFunc;
	$(document).ready(function(){
		
		$('.content div').html('<img src="/static/img/jp.jpg" width="100" height="100"/>');
		
		function startCJ(){
			var i = 1;
			cjFunc = setInterval(function(){
				$('.content div').css('border','none').removeClass('active');
				$('.content .j-'+i).css('border','3px solid red').addClass('active');
				i++;
				if( i == 9 ){
					i = 1;
				}
			},100);
		}
		
		//开始抽奖
		$('#start').on('click',function(){
			
			//TODO 读取哪些奖品已经被抽取过了
			startCJ();
		});
		
		//停止抽奖
		$('#stop').on('click',function(){
			clearInterval(cjFunc);
			$('.content .active').append('就是你');
		});
	});
	</script>
</body>
</html>